<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020-06-21
  Time: 21:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<%@page pageEncoding="UTF-8" %>
<head>
    <title>商品列表</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script src="../js/jquery-2.1.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <style>
        .he{vertical-align: middle !important;}
    </style>
</head>
<body>
<!--顶部-->
<div id="page-content"  style="height: 40px">
    <div class="container">
<nav id="top" class="collapse navbar-collapse">
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <ul class="top-link" style="float: left;">
                    <li>
                        <a href="index.jsp">首页</a>
                    </li>
                    <li>
                        <a href="#">华为官网</a>
                    </li>
                    <li>
                        <a href="#">荣耀官网</a>
                    </li>
                    <li>
                        <a href="#">花粉俱乐部</a>
                    </li>
                    <li>
                        <a href="goods.jsp">购物商城</a>
                    </li>
                    <li>
                        <a href="category.jsp">更多精彩</a>
                    </li>
                </ul>
            </div>
            <div class="col-xs-6">
                <ul class="top-link">
                    <li>
                        <a href="login.jsp">登录</a>
                    </li>
                    <li>
                        <a href="register.jsp">注册</a>
                    </li>
                    <li>
                        <a href="order.jsp">我的订单</a>
                    </li>
                    <li>
                        <a href="#">客户服务</a>
                    </li>
                    <li>
                        <a href="#">网站导航</a>
                    </li>
                    <li>
                        <a href="cart.jsp">购物车</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
</div>
</div>

<!--导航-->
<nav id="menu" class="navbar">
    <div class="container">
        <div class="navbar-header"><span id="heading" class="visible-xs">展示</span>
            <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="list.goods">荣耀商城</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">手机</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">笔记本&平板</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">智能穿戴&VR</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">智能家居&智慧屏</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">热销配件</a>
                </li>

            </ul>
        </div>
    </div>
</nav>
<div style="height: 600px;">
        <%--todo: 获取后台的数据，进行相应的展示--%>
    <table  class="table table-bordered table-hover">
        <tr>
            <th width="15%" class="text-center">商品名称</th>
            <th width="45%" class="text-center">商品配置</th>
            <th width="15%" class="text-center">商品价格</th>
            <th width="25%" class="text-center">商品操作</th>
        </tr>
        <c:forEach var="goods" items="${list}" begin="0" end="4">
            <tr>
                <td class="he">${goods.name}</td>
                <td class="he">${goods.detail}</td>
                <td class="he">${goods.price}</td>
                <td class="text-center">
                    <button class="btn btn-primary">添加进购物车</button>
                    <button class="btn btn-danger">购买</button>
                </td>
            </tr>
        </c:forEach>

        <%-- 1.先导入jstl包
             2.通过jstl将Seesion中获取数据显示在页面 --%>
        <%--<tr>
            <td class="he">测试名称</td>
            <td class="he">测试详情</td>
            <td class="he">测试价格</td>
            <td class="text-center">
                <button class="btn btn-primary">添加进购物车</button>
                <button class="btn btn-danger">购买</button>
            </td>
        </tr>--%>
    </table>
    <div id="page" style="float:right; margin: 0 50px 0 0;">
        <ul class="pagination">
            <li><a href="http://localhost:8080/demo_war_exploded/jsp/list.goods?page=1&count=5">Previous</a></li>
            <%
            int pageCount= (int) request.getSession().getAttribute("pageCount");
            for (int i = 0; i < pageCount; i++) {%>
                <li><a href="http://localhost:8080/demo_war_exploded/jsp/list.goods?page=<%=i+1%>&count=5"><%=i+1%></a></li>
            <%}
            %>
            <li><a href="http://localhost:8080/demo_war_exploded/jsp/list.goods?page=${pageCount}&count=5">Last</a></li>
        </ul>
    </div>
</div>
<!--脚步-->
<footer>
    <div class="container">
        <div class="wrap-footer">
            <div class="row">

                <div class="col-md-3 col-footer footer-1">
                    <div class="heading">
                        <h4>关于荣耀</h4></div>
                    <ul>
                        <li>
                            <a href="#">荣耀锐影像</a>
                        </li>
                        <li>
                            <a href="#">荣耀大事记</a>
                        </li>
                        <li>
                            <a href="#">荣耀人物</a>
                        </li>
                        <li>
                            <a href="#">品牌问题</a>
                        </li>
                        <li>
                            <a href="#">新闻中心</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3 col-footer footer-2">
                    <div class="heading">
                        <h4>产品</h4></div>
                    <ul>
                        <li>
                            <a href="#">手机</a>
                        </li>
                        <li>
                            <a href="#">荣耀智慧屏</a>
                        </li>
                        <li>
                            <a href="#">笔记本&平板</a>
                        </li>
                        <li>
                            <a href="#">穿戴设备</a>
                        </li>
                        <li>
                            <a href="#">智能家庭</a>
                        </li>
                        <li>
                            <a href="#">配件</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-3 col-footer footer-3">
                    <div class="heading">
                        <h4>快速链接</h4></div>
                    <ul>
                        <li>
                            <a href="#">物料下载</a>
                        </li>
                        <li>
                            <a href="#">移动端官网</a>
                        </li>
                        <li>
                            <a href="#">华为商城</a>
                        </li>
                        <li>
                            <a href="#">华为开发者联盟</a>
                        </li>
                        <li>
                            <a href="#">华为云</a>
                        </li>
                    </ul>
                </div>

                <div class="col-md-3 col-footer footer-4">
                    <div class="heading">
                        <h4>联系我们</h4></div>
                    <ul>
                        <li><span class="glyphicon glyphicon-home"></span>California, United States 3000009</li>
                        <li><span class="glyphicon glyphicon-earphone"></span>950800</li>
                        <li><span class="glyphicon glyphicon-envelope"></span>infor@yoursite.com</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="copyright">
        <div class="container">
            <div class="row">

                <span>法律声明  |   隐私声明  |   免责条款  |   关于cookies</span><br />
                <span>Copyright © 2011-2019 华为终端有限公司 版权所有 保留一切权利  |  苏公网安备 32011402010006号 粤ICP备19015064号</span>

            </div>
        </div>
    </div>
</footer>

</body>
</html>
